<template>
  <v-card>
    <v-img :src="profileInfo.avatar">
      <v-card-title class="mx-auto" max-width="300">
        <v-col align="center">
          <v-avatar size="130" color="grey">
            <img :src="profileInfo.img" alt="" />
          </v-avatar>
          <div class="white--text">{{ profileInfo.name }}</div>
        </v-col>
      </v-card-title>
      <v-divider></v-divider>
    </v-img>
    <v-col>
      <div class="ma-3">About Me:</div>
      <div class="ma-3">{{ profileInfo.desc }}</div>
    </v-col>
    <v-divider color="indigo"></v-divider>

    <v-list nav dense>
      <v-list-item>
        <v-list-item-icon class="ma-3">
          <v-icon color="light-blue lighten-1">mdi-qqchat</v-icon>
        </v-list-item-icon>
        <v-list-item-content class="grey-text font-italic">{{
          profileInfo.qqchat
        }}</v-list-item-content>
      </v-list-item>
      <v-list-item>
        <v-list-item-icon class="ma-3">
          <v-icon color="blue-grey lighten-3">mdi-github</v-icon>
        </v-list-item-icon>
        <v-list-item-content class="grey-text font-italic">{{
          profileInfo.github
        }}</v-list-item-content>
      </v-list-item>
      <v-list-item>
        <v-list-item-icon class="ma-3">
          <v-icon class="orange darken-1">mdi-email</v-icon>
        </v-list-item-icon>
        <v-list-item-content class="grey-text font-italic">{{
          profileInfo.email
        }}</v-list-item-content>
      </v-list-item>
    </v-list>
  </v-card>
</template>

<script>
export default {
  data() {
    return {
      profileInfo: {
        id: 1,
        name: "",
        qqchat: "",
        github: "",
        email: "",
        img: "",
        avatar: "",
      },
    };
  },
  created() {
    this.getProfileInfo();
  },
  methods: {
    // 获取个人设置
    async getProfileInfo() {
      const { data: res } = await this.$http.get(
        `/profile/${this.profileInfo.id}`
      );
      if (res.status != 200) return this.$message.error("获取个人设置失败");
      this.profileInfo = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>